<template>
  <div class="uni-login-wrap" id="uniLogin">
    <div class="uni-login-tabs" v-show="tabVisible">
      <div class="item"
           :class="{active: activeComponent === 'loginSdk'}"
           @click="toggleShowType('loginSdk')">
        {{ $tt('Sign In') }}
      </div>
      <div class="item"
           :class="{active: activeComponent === 'registerSdk'}"
           @click="toggleShowType('registerSdk')">
        {{ $tt('Create Account') }}
      </div>
    </div>
    <transition name="uni-component-fade" mode="out-in">
      <component :is="activeComponent"></component>
    </transition>
  </div>
</template>

<script>
import LoginSdk from '@/jsSDK/login/loginSdk.vue';
import RegisterSdk from '@/jsSDK/resgister/registerSdk.vue';
import getEnv from "@/utils/env";

export default {
  name: 'MainComponent',
  props: {
    el: String,
    mode: {type: String, default: 'master'},
    platform: {type: String, default: 'pc'},
    // WEB端传A0001, 客户端传A0002
    app_key: {type: String, default: 'A0001'},
    // 场景值：website 网站、member 会员中心、cilent 游戏客户端
    scene: {type: String, default: 'website'},
    // 广告位
    from: {type: String, default: ''},
    // 大渠道id
    channel_id: {type: String, default: ''},
    // 子渠道
    sub_channel_id: {type: String, default: ''},
    // 广告位ID
    channel_ad_id: {type: String, default: ''},
    // 邀请码
    share_code: {type: String, default: ''},
    appId: [String, Number],
    show_download: {type: Boolean, default: false},
    // 登录成功
    loginSuccess: {type: Function},
    // 注册成功
    registerSuccess: {type: Function}
  },
  components: {
    LoginSdk,
    RegisterSdk
  },
  data() {
    return {
      activeComponent: 'loginSdk',
      tabVisible: true,
      env: ''
      // activeComponent: 'LoginSdk'
    }
  },
  provide() {
    return {
      loginSuccess: this.loginSuccess
    }
  },
  created() {
    this.env = getEnv(this.mode)
  },
  methods: {
    toggleTabVisible(visible) {
      this.tabVisible = visible
    },

    toggleShowType(type) {
      this.activeComponent = type
    },

    /**
     * 为账号登录、注册 追加渠道信息（channel_id, channel_sub_id, channel_ad_id, from）
     * 供子组件（登录、注册）使用
     * @param data
     * @private
     */
    _addChannelInfo(data) {
      const {sub_channel_id, channel_id, channel_ad_id, from} = this;
      if (sub_channel_id) {
        data.sub_channel_id = sub_channel_id;
      }
      if (channel_id) {
        data.channel_id = channel_id;
      }
      if (channel_ad_id) {
        data.channel_ad_id = channel_ad_id;
      }
      if (from) {
        data.from = from;
      }
    }
  }
}
</script>

<style scoped lang="scss">
.uni-login-wrap {
  //width: 554px;
  //width: 100%;
  min-height: 530px;
  box-sizing: border-box;
  padding: 30px 20px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(175deg, #2F333B, #4F5665);

  .uni-login-tabs {
    display: flex;
    justify-content: space-around;
    padding: 0 5px;
    //margin-bottom: px;
    height: 34px;

    .item {
      padding: 0 10px;
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      transition: .3s;

      &::after {
        content: '';
        display: block;
        margin: 10px auto 0;
        height: 2px;
        width: 0;
        transition: .3s;
        background-color: #E62335;
      }

      &.active {
        font-size: 24px;
        font-weight: 700;

        &::after {
          width: 100%;
        }
      }

      &:hover {
        //font-size: 24px;
        //font-weight: 700;

        &::after {
          width: 100%;
        }
      }
    }
  }
}

.uni-component-fade-enter-active, .uni-component-fade-leave-active {
  transition: all .2s ease;
}

.uni-component-fade-enter, .uni-component-fade-leave-to
  /* .uni-component-fade-leave-active for below version 2.1.8 */
{
  opacity: 0;
  transform: translateY(5px);
}
</style>
